<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fay数字人</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}"/>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/setting.css') }}"/>
    <link rel="icon" href="{{ url_for('static',filename='images/favicon.ico') }}" type="image/x-icon">

    <!-- 引入样式 -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/element/index.css') }}">
  </head>

  <body>
    <div class="main_bg" id="app">	
      <div class="main_left">	
        <div class="main_left_logo" ><img src="{{ url_for('static',filename='images/Logo.png') }}" alt=""> 
        </div>

      <div class="main_left_menu">
        <ul>
          <li class="changeImg"><a href="/"><span class="iconimg1">消息</span></a></li>
          <li class="changeImg2"><a href="/setting"><span class="iconimg2">设置</span></a></li>
        </ul>
      </div>
      
      <div class="main_left_emoji"><img  src="{{ url_for('static',filename='images/emoji.png') }}" alt="" >
      </div>
      </div>

      <div class="main_right">
        <div class="setting_fay_top"><span style="color: #000; font-size: 20px; padding-right: 10px;">人设</span><span v-if="isConnected" style="color: #f56c6c;">已连接数字人</span><span style="margin-left: 10px;color:#f56c6c;" v-if="remoteAudioConnected">已连接远程音频</span> </div>
        <!-- 以上是即时信息显示 -->
  
        <div class="setting_fay">          
          <div class="setting_name">
            <ul>
              <li> <span class="font_name">姓&nbsp;&nbsp;&nbsp;名:</span><input class="section_1" :disabled="!configEditable" v-model="attribute_name" placeholder="请输入内容" ></li>
              <li> <span class="font_name">性&nbsp;&nbsp;&nbsp;别:</span><input class="section_1" :disabled="!configEditable" v-model="attribute_gender" placeholder="请输入内容" /></li>
              <li> <span class="font_name">年&nbsp;&nbsp;&nbsp;龄:</span><input class="section_1" :disabled="!configEditable"  v-model="attribute_age" placeholder="请输入内容" /></li>
              <li> <span class="font_name">出生地:</span><input class="section_1" :disabled="!configEditable"  v-model="attribute_birth" placeholder="请输入内容" /></li>                    
              <li> <span class="font_name">生&nbsp;&nbsp;&nbsp;肖:</span><input class="section_1" :disabled="!configEditable"  v-model="attribute_zodiac" placeholder="请输入内容" /></li>
              <li> <span class="font_name">星&nbsp;&nbsp;&nbsp;座:</span><input class="section_1" :disabled="!configEditable"  v-model="attribute_constellation" placeholder="请输入内容" /></li>  
              <li> <span class="font_name">定&nbsp;&nbsp;&nbsp;位:</span>
                <select class="section_1" :disabled="!configEditable" v-model="attribute_position" placeholder="请选择定位">
                  <option value="客服">客服</option>
                  <option value="陪伴">陪伴</option>
                  <option value="教培">教培</option>
                  <option value="娱乐">娱乐</option>
                  <option value="销售">销售</option>
                  <option value="助理">助理</option>
                </select>
              </li>
              
            </ul>
          </div>
          <div class="setting_work">
            <ul>
              <li> <span class="font_name">目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标:</span>
                <select class="section_1" :disabled="!configEditable" v-model="attribute_goal" placeholder="请选择目标">
                  <option value="解决问题">解决问题</option>
                  <option value="陪伴情感">陪伴情感</option>
                  <option value="提供知识">提供知识</option>
                  <option value="促成交易">促成交易</option>
                  <option value="工作协助">工作协助</option>
                </select>
              </li>
              <li> <span class="font_name">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业:</span><input class="section_1" :disabled="!configEditable"  v-model="attribute_job" placeholder="请输入内容"/></li>
              <li> <span class="font_name">&nbsp;联系方式:</span><input class="section_1" :disabled="!configEditable" v-model="attribute_contact" placeholder="请输入内容" /></li>
              <li> <span class="font_name">Q&A文件:</span><input class="section_1" :disabled="!configEditable" v-model="QnA" placeholder="请输入内容" /></li>
              <li> <span class="font_name">补&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;充:</span><textarea  v-model="attribute_additional" class="section_1" style="height: 165px;vertical-align: middle;"></textarea></li>           
            </ul>
          </div>
          <div class="setting_rup">      
          <div class="setting_wakeup">            
            <ul>
              <li> <span class="font_name">唤醒模式:</span>
                <el-switch @change=saveConfig()
                v-model="wake_word_enabled"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>              
              </li>
              <li> <span class="font_name">&nbsp;唤&nbsp;醒&nbsp;词:</span>
                <input v-model="wake_word" placeholder="请输入内容（以,隔开）" :disabled="!configEditable" class="section_1" /></li>
              <li> <span class="font_name">唤醒方式:</span>
                <select class="section_1" v-model="wake_word_type" :disabled="!configEditable">
                  <option v-for="item in wake_word_type_options" :key="item.value"
                  :label="item.label" :value="item.value">
              </option>
              </select></li>   
            </ul>
          </div>

             <div class="microphone"> 
              <div class="microphone_group1">
                <span class="font_name">服务器扬声器</span>
                <el-switch  v-model="play_sound_enabled" active-color="#13ce66" inactive-color="#ff4949" @change=saveConfig()> </el-switch>
              </div>
              <div class="microphone_group1" >
                <span class="font_name">服务器麦克风</span>
                <el-switch   v-model="source_record_enabled" active-color="#13ce66" inactive-color="#ff4949" @change=saveConfig()> </el-switch>
              </div>
            </div>    
            <div class="setting_wakeup">            
              <ul>
              <li> <span class="font_name">声音选择:</span>
                <select v-model="attribute_voice" placeholder="请选择" class="section_1" style="height: 39px;" :disabled="!configEditable">
                  <option v-for="item in voiceList" :key="item.value" 
                  :label="item.label" :value="item.value">
              </option>
              </select></li>
              <li style="display: flex;"> <span class="font_name" style="line-height: 36px;">&nbsp;敏&nbsp;感&nbsp;度&nbsp;:</span>
                <el-slider  style="width: 230px;" v-model="interact_perception_follow" :disabled="!configEditable"></el-slider></li>           
            </ul>
          </div>
         
        </div>

        </div>

        <div class="setting_autoplay">
          <div><el-switch
            v-model="automatic_player_status" @change=saveConfig()
            active-color="#13ce66" 
            inactive-color="#ff4949">
          </el-switch><span class="font_name" style="margin-left: 10px;">自动播放：</span>
          <input class="section_2" v-model="automatic_player_url" placeholder="http://127.0.0.1:6000" :disabled="!configEditable" />
        </div>
        </div>
        <div style="margin-top: 40px; text-align: center;">
          <el-button style="width: 160px;height: 50px;margin-left: -100px;" :disabled="!configEditable"  @click=saveConfig()>保存配置</el-button>

          
          <!-- <el-button type="primary" style="width: 160px;height: 50px;margin-left: 100px;background-color: #007aff;">开 启</el-button> -->
          <el-button v-if="liveState == 1" type="success" class="btn_close"
          style="width: 160px;height: 50px;margin-left: 100px;background-color: #007aff;" @click=stopLive()>关闭（运行中）</el-button>
                                    <el-button v-else-if="liveState == 2" type="primary" plain disabled
                                    style="width: 160px;height: 50px;margin-left: 100px;background-color: #007aff;">正在开启...</el-button>
                                    <el-button v-else-if="liveState == 3" type="success" plain disabled
                                    style="width: 160px;height: 50px;margin-left: 100px;background-color: #007aff;">正在关闭...</el-button>
                                    <el-button v-else type="primary" style="width: 160px;height: 50px;margin-left: 100px;background-color: #007aff;"
                                        @click=startLive()>开启</el-button>
        </div>
      </div>

    </div>

    </body>
    <!-- import Vue before Element -->
    <script src="{{ url_for('static',filename='js/vue.js') }}"></script>
    <script src="{{ url_for('static',filename='js/element.js') }}"></script> <!-- 这里需要确保先引入 Element -->
    <script src="{{ url_for('static',filename='js/setting.js') }}"></script>
 
</html>